<template>
	<view class="confirm_order">
		<!-- 联系人 -->
		<view class="contact" @click="jump('/pages/order/address?save=1')" v-if="groudList.order_prefix != 'VRT'">
			<view class="top">
				<text class="name">{{ address.name }}</text>
				<text class="phone">{{ address.phone }}</text>
			</view>
			<view class="bottom">
				<!-- 地址 -->
				<view class="address">
					<text>{{ address.province + address.city + address.area + address.address }}</text>
				</view>
				<!-- 右箭头 -->
				<view class="icon_right">
					<!-- <image src="../../static/img/right.png" mode="aspectFit"></image> -->
					<text class="mallicon icon-xiangyou"></text>
				</view>
			</view>
		</view>
		<!-- 商品信息 -->
		<view class="goods_list">
			<view class="info" v-for="(item, index) in groudList.allGoods" :key="index">
				<view class="img">
					<image :src="item.logo" mode="aspectFit"></image>
				</view>
				<view class="detail">
					<!-- 标题 -->
					<text class="title">{{ item.title }}</text>
					<!-- 金额数量 -->
					<view class="note">
						<text class="total">￥{{ item.price_market }}</text>
						<text class="num">×{{ item.total }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="money com_money_sty message">
			<view style="width: 180upx;font-size: 30rpx;">买家留言：</view>
			<input style="flex: 1;color: #999;font-size: 26upx;" type="text" value="" v-model="text" placeholder="选填，填写内容与商家协商确认" />
		</view>
		<!-- 金额-数量 信息 -->
		<view class="money_options">
			<!-- 商品金额 -->
			<view class="money com_money_sty">
				<text class="title com_tx_sty">商品金额：</text>
				<text class="com_sum_sty">￥{{ totalPrice }}</text>
			</view>
			<view class="discountPrice">
				<view style="font-size: 30rpx;">{{groudList.level_name}} </view>
				<view style="font-size: 30rpx;">-￥{{groudList.discount}}</view>
			</view>
			<!-- 邮费 -->
			<view class="postage com_money_sty">
				<text class="com_tx_sty">邮费</text>
				<!-- <text class="com_sum_sty" v-if="groudList.priceexpress == 0">包邮</text> -->
				<text class="com_sum_sty">￥{{ groudList.priceexpress }}</text>
			</view>
			<!-- 优惠券 -->
			<view class="postage com_money_sty" v-if="chooseCoupon==false">
				<text class="com_tx_sty">优惠券</text>
				<text class="com_sum_sty">暂无优惠券</text>
			</view>
			<view class="postage com_money_sty" v-if="chooseCoupon==true">
				<text class="com_tx_sty">优惠券</text>
				<view style="display: flex;justify-content: center;align-items: center;" @click="show=!show">
					<text class="com_sum_sty">{{couponTitle}}</text>
					<!-- <image style="width: 36upx;height: 36upx;" src="../../static/icon/right.png" mode=""></image> -->
					<text class="mallicon icon-xiangyou"></text>
				</view>
			</view>
		</view>
		<view class="money_options">
			<!-- 提醒 -->
			<view class="postage com_money_sty">
				<text class="com_tx_sty" style="color: red;font-weight: bold;">温馨提示：健康产品 理性消费</text>
			</view>
		</view>
		<!-- 提交订单 -->
		<view class="submit">
			<view class="left">
				<text class="tx">合计：</text>
				<text class="total">￥{{ groudList.pricemarket }}</text>
			</view>
			<view class="right"><button @click="handleSubmit">提交订单</button></view>
		</view>
		<!-- 优惠券弹窗 -->
		<view class="popup" v-if="show">
			<view class="mask" @click="show=!show"></view>
			<view class="shade">
				<view class="list">
					<view class="box" v-for="(item,index) in coupon" :key="index">
						<view class="content">
							<view class="box-left" v-if="item.type==1">
								<text class="icon">￥</text>
								<view class="num">
									{{Number(item.discount)}}
								</view>
							</view>
							<view class="box-left" v-if="item.type==2">
								<view class="num">
									{{item.discount*10}}
								</view>
								<text class="icon">折</text>
							</view>
							<view class="right">
								<view class="box-center">
									<view class="text">
										{{item.title}}
									</view>
									<view class="time">
										{{item.use_starttime}}~{{item.use_endtime}}
									</view>
								</view>
								<view class="box-right">
									<view class="text" @click="useCoupon(item.id,item.title)">
										使用
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="cancel" @click="show=!show">
						<view class="">
							暂时不需要~
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import service from '@/store/service.js';
	export default {
		data() {
			return {
				show: false,
				text: '',
				checked: false,
				id: '',
				tid: 0,
				groudList: [],
				oid: '',
				groudId: '',
				teamid: 0,
				address: '',
				totalPrice: 0,
				// 优惠券
				coupon: [],
				chooseCoupon: false,
				couponTitle: '请选择优惠券',
				couponId: '',
				listData: [{
					discount: 5,
					time: '2020.10.27 ~ 2020.10.30'
				}]
			};
		},
		onLoad: function(e) {
			this.id = e.goodsid;
			this.teamid = e.teamid;
			console.log('订单页面onLoad收到的消息',e);
			if (this.teamid == undefined) {
				this.teamid = 0;
			} else {
				this.teamid = this.teamid;
			}
			this.handleCreateOrder();
		},
		onShow: function() {
			this.address = uni.getStorageSync('address');
			// this.handleCreateOrder();
		},
		methods: {
			// 使用优惠券
			useCoupon(id, title) {
				var self = this;
				self.show = false
				self.couponId = id
				self.couponTitle = title
				// self.$Request.post(self.$api.order.getAddressList).then(res => {
				self.$Request.post(self.$api.order.caculate, {
						coupon_id: id,
						goods: uni.getStorageSync('goodData')
					})
					.then(res => {
						console.log(res);
						var list = res.data;
						self.groudList = list;
						if (list.coupon) {
							self.chooseCoupon = true
							self.coupon = list.coupon
						}
						console.log(self.coupon, 1234);
						if (list.addressInfo != null) {
							self.address = list.addressInfo;
						}
					});
			},
			jump(url) {
				console.log(546464688,'/pages/order/address?save=1')
				uni.navigateTo({
					url: '/pages/address/address?AddressID='+this.address.AddressID
				});
				// uni.navigateTo({
				// 	url: '/pages/address/address?AddressID='+this.addressData.AddressID
				// })
			},
			paymentType(e) {
				const paymentType = e.detail.value;
				// console.log(paymentType);
			},
			handleCreateOrder() {
				var self = this;

				self.$Request.post(self.$api.order.caculate, {
						// goodsid: this.id,
						// teamid: this.teamid
						// goods:[{goodsid: this.id,optionid:self.oid,total:1}]
						goods: uni.getStorageSync('goodData')
					})
					.then(res => {
						// console.log(res.data.categroy);
						// console.log(res);
						var list = res.data;
						self.groudList = list;
						if (list.coupon) {
							self.chooseCoupon = true
							self.coupon = list.coupon
						}
						console.log(self.coupon, 1234);
						if (list.addressInfo != null) {
							self.address = list.addressInfo;
						}
						console.log(list.allGoods, 666);
						list.allGoods.map(item => {
							this.totalPrice += item.total * item.price_market
						})
					});
			},
			handleSubmit(id) {
				// console.log(id);
				var self = this;
				console.log(this.id);
				console.log(this.teamid);
				self.$Request.post(self.$api.order.create, {
						// goodsid: this.id,
						// teamid: this.teamid,
						// goods: [{ goodsid: 69521772677015, optionid: 10, total: 1 }],
						coupon_id: self.couponId,
						goods: uni.getStorageSync('goodData'),
						remark: self.text,
						address_id: self.address.id,

						// username: address.name,
						// mobile: address.phone,
						// province: address.province,
						// city: address.city,
						// area: address.area,
						// address: address.address

						// teamid:0
					})
					.then(function(res) {
						if (res.code == 0) {
							uni.showToast({
								icon: 'none',
								title: res.info
							});
						}
						// console.log(res.data.categroy);
						// console.log(res);
						var list = res.data;
						self.groudId = list;
						console.log(self.groudId.order.id, 9000);
						if (res.code == 1) {
							uni.navigateTo({
								// url: './orderDetail?orderid=' + 69521772677015
								url: '/pages/order/pay?orderId=' + self.groudId.order.id
								// url:'./orderDetail?orderid='+24
							});
						} else {
							// console.log(3333);
							uni.showToast({
								icon: 'none',
								title: res.info
							});
						}
					});
			}
		}
	};
</script>

<style lang="less" scoped>
	.confirm_order {
		padding: 20upx;

		// 联系人
		.contact {
			width: 100%;
			// height: 200upx;
			background: rgba(255, 255, 255, 1);
			border-radius: 20upx;
			box-sizing: border-box;
			padding: 20upx 0 20upx 20upx;
			margin-bottom: 20upx;

			.top {
				display: flex;
				// justify-content: space-between;

				.name {
					height: 31upx;
					font-size: 32upx;
					font-weight: bold;
					color: rgba(0, 0, 0, 1);
					margin-right: 40upx;
				}

				.phone {
					height: 25upx;
					font-size: 32upx;
					font-weight: bold;
					color: rgba(0, 0, 0, 1);
					margin-right: 22upx;
				}
			}

			.bottom {
				display: flex;
				height: 72upx;
				width: 100%;
				margin-top: 26upx;
				align-items: center;

				.icon_right {
					height: 48upx;
					width: 48upx;
					margin-top: 6upx;

					>image {
						height: 100%;
						width: 100%;
					}
				}

				.address {
					flex: 1;
					margin-top: 5upx;

					>text {
						font-size: 28upx;
						font-weight: bold;
						color: rgba(102, 102, 102, 1);
					}
				}
			}
		}

		.goods_list {
			padding: 26upx 31upx 2upx 21upx;
			background: rgba(255, 255, 255, 1);
			border-radius: 20upx 20upx 0 0;

			// width: 100%;
			// height: 322upx;
			// height: 160upx;
			// margin-top: 20upx;
			.info {
				display: flex;
				margin-bottom: 40upx;

				.img {
					height: 165upx;
					width: 165upx;

					>image {
						height: 100%;
						width: 100%;
					}
				}

				.detail {
					margin-left: 15upx;
					display: flex;
					flex-direction: column;
					justify-content: space-around;

					.title {
						width: 478upx;
						// height: 66upx;
						font-size: 28upx;
						font-weight: 500;
						color: rgba(51, 51, 51, 1);
						line-height: 36upx;
						text-overflow: ellipsis;
						overflow: hidden;
					}

					.type {
						width: 122upx;
						height: 35upx;
						background: rgba(244, 244, 244, 1);
						border-radius: 18upx;
						font-size: 22upx;
						font-weight: 500;
						color: rgba(170, 169, 169, 1);
						text-align: center;
						margin-top: 10upx;
					}

					.note {
						margin-top: 26upx;
						display: flex;
						justify-content: space-between;

						.total {
							flex: 1;
							height: 22px;
							font-size: 28upx;
							font-weight: bold;
							color: #f81149;
							line-height: 42upx;
						}

						.num {
							width: 26upx;
							height: 20upx;
							font-size: 28upx;
							font-weight: 500;
							color: #f81149;
							line-height: 42upx;
						}
					}
				}
			}

			.comment {
				margin-top: 50upx;
				display: flex;
				align-items: center;
			}
		}

		.money_options {
			// width: 100%;
			// height: 351upx;
			// height: 200upx;
			background: rgba(255, 255, 255, 1);
			border-radius: 20upx;
			margin-top: 20upx;
			padding: 20upx 0;
			// margin-bottom: 100upx;

			.com_money_sty {
				// height: 60upx;
				// width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 25upx 21upx;

				.com_tx_sty {
					// height: 25upx;
					font-size: 26upx;
					font-weight: 500;
					color: rgba(102, 102, 102, 1);
					line-height: 25upx;
				}

				.com_sum_sty {
					// height: 22upx;
					font-size: 28upx;
					font-weight: bold;
					color: rgba(51, 51, 51, 1);
					line-height: 22upx;
				}
			}

			.receipt {
				margin-top: 56upx;

				.top {
					display: flex;
					justify-content: space-between;
					height: 40upx;
					// width: 100%;
					padding: 0 21upx;

					>text {
						height: 25upx;
						font-size: 26upx;
						font-weight: 500;
						color: rgba(102, 102, 102, 1);
					}

					.img {
						height: 40upx;
						width: 40upx;
						// border: 1px dashed #888888;
						display: flex;
						align-items: center;
						justify-content: center;
						padding-left: 7upx;
						overflow: hidden;
					}
				}

				.note {
					width: 278upx;
					height: 20upx;
					font-size: 20upx;
					font-weight: 500;
					color: rgba(153, 153, 153, 1);
					padding: 0 21upx;
				}
			}
		}

		// 支付方式
		.payment_methods {
			padding: 0 27upx 0 20upx;
			// width:100%;
			height: 255upx;
			border-radius: 20upx;
			margin-top: 20upx;
			margin-bottom: 98upx;
			background-color: #ffffff;

			// 共有样式
			.com_sty_row {
				height: 80upx;
				width: 100%;
				padding: 0 19upx 0 16upx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left {
					display: flex;
					align-items: center;

					>image {
						height: 58upx;
						width: 58upx;
					}

					>text {
						height: 25upx;
						font-size: 26upx;
						font-weight: 500;
						color: rgba(102, 102, 102, 1);
						line-height: 25upx;
						margin-left: 8upx;
					}
				}

				.right {}
			}
		}

		// 提交订单
		.submit {
			// width:100%;
			height: 98upx;
			background: rgba(255, 255, 255, 1);
			border: 1px solid rgba(206, 206, 206, 0.49);
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			padding: 0 27upx 0 73upx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				display: flex;
				align-items: center;
				height: 100%;

				.tx {
					height: 26upx;
					font-size: 28upx;
					font-weight: 500;
					color: rgba(102, 102, 102, 1);
					line-height: 26upx;
				}

				.total {
					height: 28upx;
					font-size: 36upx;
					font-weight: bold;
					color: #f81149;
					line-height: 28upx;
				}
			}

			.right {
				>button {
					width: 275yupx;
					height: 80upx;
					background: #f81149;
					border-radius: 40upx;
					text-align: center;
					line-height: 80upx;
					font-size: 36upx;
					font-weight: 500;
					color: rgba(255, 255, 255, 1);
				}
			}
		}
	}

	.discount {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.message {
		display: flex;
		align-items: center;
		background-color: #fff;
		padding: 0 0 30upx 20upx;
		border-radius: 0 0 20upx 20upx;
	}

	.discountPrice {
		display: flex;
		justify-content: space-between;
		padding: 0 20upx;
	}

	// 优惠券
	.popup {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 999;
	}

	.cancel {
		width: 687upx;
		height: 145upx;

		background: #F4F4F4;
		position: fixed;
		bottom: 0;

		view {
			height: 100upx;
			line-height: 100upx;
			background: #FFFFFF;
			border: 1px solid #E6E6E6;
			border-radius: 12upx;
			text-align: center;
		}
	}

	.mask {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
		background-color: rgba(0, 0, 0, 0.4);
	}

	.shade {
		width: 100%;
		height: 700upx;
		overflow: scroll;
		min-height: 40vh;
		background: #F4F4F4;
		position: fixed;
		bottom: 0;
		z-index: 99;
		padding-bottom: 60px;
	}

	.list-scroll-content {
		height: 100%;
	}

	.list {
		padding: 30upx;

		.box {
			width: 690upx;
			height: 194upx;
			background: #FFFFFF;
			border: 1px solid #E6E6E6;
			border-radius: 12upx;
			margin-bottom: 30upx;

			.content {
				display: flex;
				justify-content: space-around;

				.box-left,
				.box-left1,
				.box-left2 {
					width: 212upx;
					height: 194upx;
					background: #F81149;
					box-shadow: 3upx 0px 8upx 1px #FCE1E8;
					border-radius: 12upx 0px 0px 12upx;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;

					.icon {
						margin-top: 20upx;
						height: 49upx;
						font-size: 40upx;
						// font-weight: bold;
						color: #FFFFFE;
						line-height: 59upx;
						text-align: center;
					}

					.num {
						font-size: 80upx;
						font-weight: bold;
						color: #FFFFFE;
						line-height: 72upx;
					}

				}

				.box-left1 {
					background: #c1c1c1;
				}

				.box-left2 {
					background: #F86A8C;
				}


				.right {
					display: flex;
					justify-content: space-between;
					align-items: center;
				}

				.box-center {
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					margin-right: 20upx;

					.text {
						font-weight: bold;
						color: #242424;
						font-size: 36upx;
						margin-bottom: 10upx;
					}

					.time {
						font-size: 24upx;
						color: #999999;
						transform: scale(0.9);
					}
				}

				.box-right {
					display: flex;
					align-items: center;
					justify-content: center;

					.text,
					.text1,
					.text2 {
						width: 140upx;
						height: 58upx;
						background: #FFFFFF;
						border: 2upx solid #F81149;
						border-radius: 29upx;
						text-align: center;
						margin-right: 22upx;
						font-size: 32upx;
						font-weight: 500;
						color: #F81149;
						text-align: center;
					}

					.text1 {
						border: 2upx solid #C1C1C1;
						color: #C1C1C1;
					}

					.text2 {
						border: 2upx solid #F86A8C;
						color: #F86A8C;
					}
				}
			}
		}
	}
</style>
